<template>
  <div class="page-wrap">
    <Table
      ref="table"
      title="用户列表"
      stripe
      :searchShowLen="3"
      :search="search"
      :request="getList"
      :showSelection="true"
      :showIndex="true"
      :columns="columns"
      :customBtnList="customBtn"
      @custom-click="customClick"
      @row-click="rowClick"
      @btn-click="btnClick"
      @selection-change="selectionChange"
    ></Table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
const table = ref(null)
// 刷新列表
const refresh = () => {
  table.value.refresh()
}

const search = {
  // labelWidth: '90px', // 必须带上单位
  // inputWidth: '360px', // 必须带上单位
  fields: [
    {
      type: 'text',
      label: '姓名',
      name: 'realname',
    },
    {
      type: 'text',
      label: '电话',
      name: 'tel',
    },
    {
      type: 'select',
      label: '地址',
      name: 'address',
      options: [{
        value: 'wh',
        name: '武汉'
      }, {
        value: 'sh',
        name: '上海'
      }, {
        value: 'sz',
        name: '深圳'
      }],
      defaultValue: 'wh',
      multiple: false,
      filterable: true,
    },
    {
      type: 'number',
      label: '数字',
      name: 'num',
      min: 0,
      max: 10,
    },
    {
      type: 'radio',
      label: '单选',
      name: 'sex1',
      options: [
        {name: "男", value: 1},
        {name: "女", value: 2},
      ],
      defaultValue: 1,
    },
    {
      type: 'radio-button',
      label: '单选按钮',
      name: 'sex2',
      options: [
        {name: "男", value: 1},
        {name: "女", value: 2},
      ],
      defaultValue: 1,
    },
    {
      type: 'checkbox',
      label: '多选',
      name: 'city1',
      options: [
        {name: "武汉", value: 1},
        {name: "长沙", value: 2},
        {name: "上海", value: 3},
        {name: "深圳", value: 4},
      ],
      defaultValue: [1,3],
      transform: val => val.join(','),
    },
    {
      type: 'checkbox-button',
      label: '多选按钮',
      name: 'city2',
      options: [
        {name: "武汉", value: 1},
        {name: "长沙", value: 2},
        {name: "上海", value: 3},
        {name: "深圳", value: 4},
      ],
      transform: val => val.join(','),
    },
    {
      type: 'date',
      label: '日期',
      name: 'date1',
      defaultValue: '2021-08-20',
    },
    {
      type: 'datetime',
      label: '日期时间',
      name: 'date2',
    },
    {
      type: 'daterange',
      label: '日期范围',
      name: 'date3',
      trueNames: ['startDate', 'endDate']
    },
    {
      type: 'datetimerange',
      label: '日期时间范围',
      name: 'date4',
      trueNames: ['startTime', 'endTime']
    },
  ]
}

const customBtn = [
  {label: '新增',handel: 'add'},
  {label: '导出excel', handel: 'export'},
]

const columns = [
  {
    label: '头像',
    prop: 'avatar',
    elementType: 'img',
  },
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '联系电话',
    prop: 'mobile',
  },
  {
    label: '详细地址',
    prop: 'address',
  },
  {
    label: '日期',
    prop: 'date',
  },
  {
    label: '操作',
    prop: 'operate',
    options: [
      {label: '编辑', size: 'medium'},
      {label: '删除', size: 'medium'},
      {
        label: '更多', 
        size: 'medium',
        dropdownMenu: [
          {label: '查看详情', },
          {label: '备注',  }
        ]
      },
    ],
    
  },
]

const getList = async (params) => {    // params是从组件接收的，包含分页和搜索字段。
    console.log(params,"params")

    // const { data } = await getUserList(params);
    const dataList: any = await new Promise(res => {
      setTimeout(() => {
        res({
          code: 200,
          data: {
            list: [
              {
                  id: 1,
                  avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                  name: '李倩',
                  mobile: '15728263525',
                  address: '武汉市帝斯曼国际中心26层',
                  date: '2021-08-12',
              },
              {
                  id: 2,
                  avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                  name: '陈文',
                  mobile: '15728236425',
                  address: '武汉市帝斯曼国际中心26层',
                  date: '2021-08-13',
              },
              {
                  id: 3,
                  avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                  name: '周海文',
                  mobile: '15728263525',
                  address: '武汉市帝斯曼国际中心26层',
                  date: '2021-08-20',
              },
              {
                  id: 4,
                  avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                  name: '黄腾',
                  mobile: '15728236425',
                  address: '武汉市帝斯曼国际中心26层',
                  date: '2021-08-21',
              }
            ],
            total: 4,
          },
        })
      },3000)
    })
    const { data } = dataList
    return {   // 必须要返回一个对象，包含data数组和total总数
      data: data.list,
      total: data.total,
    };
}

const rowClick = (row,column) => {
  console.log(row,column)
}

const selectionChange = (val) => {
  console.log(val)
}

const customClick = (val) => {
  ElMessageBox.alert(`你点击了${val.label}`, '操作', {
    confirmButtonText: '确定',
    callback: (action) => {
      
    },
  });
}

const btnClick = (val) => {
  ElMessageBox.alert(`你点击了${val.currentMenu || val.label}`, '操作', {
    confirmButtonText: '确定',
    callback: (action) => {
      
    },
  });
}

</script>
